<template>
  <div class="invitation">
    <div class="contentNav">
        <van-list
          v-model="loading"
          :finished="finished"
          @load="onLoad"
          finished-text="没有更多了"
          :immediate-check="false">
          <van-tabs v-model="activeName" color="rgba(74,172,233,1)" @click="tabsClick">
            <van-tab title="帖子">
              <div :class="index==0? 'tieActive tie border_three' : 'tie border_three' " v-for="(item,index) in order" :key='index' @click='$router.push({path:"invitationContent",query:{postId:item.postId}})'>
                <div class="top mt-10">
                  <img :src="item.userInfo.userPhoto" class="pic l" @click.stop='$router.push({path:"otherUser",query:{userId:item.userInfo.userId}})'/>
                  <div class="txt1 l">
                    <div class="title"><div class="name hide_other">{{item.userInfo.userName}}</div><div class="typeName" v-if='item.userInfo.roleName=="公众号"'>公众号</div><div class="clear"></div></div>
                    <div class="time">{{item.dbCreateTime}}</div>
                  </div>
                  <div class="clear"></div>
                </div>
                <div class="txt2 hide_otherFour" v-if='item.txtStatus'>{{item.content.slice(0,76)}}<span v-if="item.content.length>76" class="more" @click.stop='item.txtStatus=false'>查看更多>></span></div>
                <div class="txt2" v-else>{{item.content}}<span v-if="item.content.length>76" class="more" @click.stop='item.txtStatus=true'>收起</span></div>
                <div class="pic">
                  <img v-for='(items,indexs) in item.images.slice(0,9)' :key='indexs' :src="items"/>
                </div>
                <div class="bottom mt-30">
                  <div class="peopleNum l">868人看到</div>
                  <div class="otherNum2 r"><img src="../../../../public/images/qt_107.png"/>{{item.thumbUpNum}}</div>
                  <div class="otherNum1 r mr-50"><img src="../../../../public/images/qt_78.png"/>{{item.commentNum}}</div>
                  <div class="clear"></div>
                </div>
              </div>

            </van-tab>

            <van-tab title="商品">
                <div class="shopMessage border_three" v-for="(item,index) in order" :key='index' @click='$router.push({path:"shopDetail",query:{categoryId:item.commodityId}})'>
                  <div class="title">
                    <p class="l">{{item.title}}</p>
                    <div class="publicTags l">{{item.quality}}</div>
                    <div class="clear"></div>
                  </div>
                  <p class="time">{{item.dbCreateTime}} 发布</p>
                  <div class="price">
                    <p class="l">￥{{item.price}}</p>
                    <div class="tags_1 l" v-if='item.bargain==0'>不讲价</div>
                    <div class="tags_1 l" v-else>可议价</div>
                    <div class="clear"></div>
                  </div>
                  <div class="navs mt-10 flex_between">
                    <div class="navTxt">
                      <p class="hide_otherThree">{{item.content}}</p>
                    </div>
                    <img :src="item.images[0]" />
                  </div>
                  <div class="bot">
                    <div class="l">868人看到</div>
                    <div class="otherNum1 ml-70 l"><img src="../../../../public/images/qt_107.png"/>{{item.commentNum}}</div>
                    <div class="otherNum2 ml-70 l"><img src="../../../../public/images/qt_78.png"/>{{item.thumbUpNum}}</div>
                    <div class="jubao r"><img src="../../../../public/images/qt_83.png" @click.stop='$router.push({path:"report"})'/>举报</div>
                    <div class="clear"></div>
                  </div>
                </div>
            </van-tab>
          </van-tabs>
        </van-list>
          <!-- </van-pull-refresh> -->
    </div>
    
  </div>
</template>

<script>
import storage from '@/common/store'
export default {
    name:"myCompliments",
    data() {
      return {
        activeName:0,
        order:[],
        finished:false,
        page:1,
        size:10,
        loading:false,
        categoryList:[],
        userId:storage.getItem('userInfo').userId,
      }
    },
    created(){
      this.getMessage();
    },
    methods:{
      tabsClick(name,title){
        this.order=[];
        this.getMessage();
        console.log(this.active);
      },
       getMessage(){
        this.finished  = false;
        if(this.activeName==0){
          this.$get(this.$api.user.postsThumb,{size:this.size,page:1,userId:this.userId}).then(data=>{
            data.data.curPageData.forEach((item,index,array)=>{
              array[index]=JSON.parse(item.content);
              array[index].postId=item.postId;
              array[index].thumbUpNum=item.thumbUpNum;
              array[index].commentNum=item.commentNum;
              array[index].userInfo=item.userInfo;
              array[index].dbCreateTime=this.ConvertIso(item.dbCreateTime);
              array[index].txtStatus=true;
              array[index].images=JSON.parse(item.images);
              array[index].isThumb=item.isThumb;
            })
            this.order=data.data.curPageData;
            console.log(Number(this.page)*this.sizes,data.data.totalNum)
            if(Number(this.page)*this.size>=data.data.totalNum) this.finished  = true;
            this.page=2;
          });
        }else{
          this.$get(this.$api.user.commoditiesThumb,{size:this.size,page:1,userId:this.userId}).then(data=>{
            data.data.curPageData.forEach((item,index)=>{
              data.data.curPageData[index].images=JSON.parse(item.images);
              data.data.curPageData[index].dbCreateTime=this.ConvertIso(data.data.curPageData[index].dbCreateTime);
            });
            this.order=data.data.curPageData;
            if(Number(this.page)*this.size>=data.data.totalNum) this.finished  = true;
            this.page=2;
          })
        }
        
      },
      onLoad() {
        setTimeout(() => {
           if(this.activeName==0){
             this.$get(this.$api.user.postsThumb,{size:this.size,page:this.page,userId:this.userId}).then(data=>{
              data.data.curPageData.forEach((item,index,array)=>{
                array[index]=JSON.parse(item.content);
                array[index].postId=item.postId;
                array[index].thumbUpNum=item.thumbUpNum;
                array[index].commentNum=item.commentNum;
                array[index].userInfo=item.userInfo;
                array[index].dbCreateTime=this.ConvertIso(item.dbCreateTime);
                array[index].txtStatus=true;
                array[index].images=JSON.parse(item.images);
                array[index].isThumb=item.isThumb;
              })
              for (let i = 0; i < data.data.curPageData.length; i++) {
                this.order.push(data.data.curPageData[i]);
              };
              
              if(Number(this.page)*this.size<data.data.totalNum){
                this.page++;
                this.loading = false;
              }else{
                this.loading = false;
                this.finished  = true;
              }
            })
           }else{
             this.$get(this.$api.user.commoditiesThumb,{size:this.size,page:this.page,userId:this.userId}).then(data=>{
              data.data.curPageData.forEach((item,index)=>{
                data.data.curPageData[index].images=JSON.parse(item.images);
                data.data.curPageData[index].dbCreateTime=this.ConvertIso(data.data.curPageData[index].dbCreateTime);
              });
              for (let i = 0; i < data.data.curPageData.length; i++) {
                this.order.push(data.data.curPageData[i]);
              };
              if(Number(this.page)*this.size<data.data.totalNum){
                this.page++;
                this.loading = false;
              }else{
                this.loading = false;
                this.finished  = true;
              }
            })
           }
           
        }, 500);
      },
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .contentNav{height: calc(100vh - 46px - 1rem - 44px);overflow-y: scroll;}

  /* .tieActive::before{content: '顶';width:0.45rem;height: 0.45rem;background-color: #F43711;font:0.24rem/0.45rem '微软雅黑';text-align: center;border-bottom-right-radius:0.24rem;position:absolute;left: 0;top: 0;color: #fff; } */
  .goodslq::before{content: '已领取';background-color: #AAAAAA;width: 0.88rem;height: 0.42rem;text-align: center;border-bottom-left-radius: 0.21rem;font: 0.2rem/0.42rem '微软雅黑';position: absolute;right: 0;top: 0;color: #fff;}
  .goodsdlq::before{content: '待领取';background-color: #24C067;width: 0.88rem;height: 0.42rem;text-align: center;border-bottom-left-radius: 0.21rem;font: 0.2rem/0.42rem '微软雅黑';position: absolute;right: 0;top: 0;color: #fff;}
  .tie{padding: 0.3rem;position: relative;}
  .tie .top .pic{display: block;width: 0.8rem;height: 0.8rem;border-radius: 50%;overflow: hidden;}
  .tie .top .txt1{margin-left: 0.25rem;}
  .tie .top .txt1 .title .name{font: 0.32rem/0.45rem '微软雅黑';color: #4AACE9;max-width: 1.5rem;float: left;height: 0.45rem;}
  .tie .top .txt1 .typeName{float: left;width: 0.64rem;height: 0.32rem;margin: 0.06rem 0 0 0.2rem;border-radius: 0.04rem;background-color: #F88222;color: #fff;text-align: center;font: 0.16rem/0.32rem '微软雅黑';}
  .tie .top .txt1 .time{font:0.24rem/0.35rem '微软雅黑';color: #999999;}
  .tie .top .btn_gz{width: 1.16rem;height: 0.46rem;display: block;margin-top: 0.1rem;}
  .tie .txt2{font: 0.32rem/0.48rem '微软雅黑';color: #333333;margin: 0.3rem 0;}
  .tie .txt2 .more{color: #4AACE9;margin-left: 0.2rem;font: 0.3rem/0.4rem '微软雅黑';}
  .tie .pic img{display: inline-block;margin: 0.04rem 0.05rem 0.1rem 0.05rem;width:calc((100% - 0.3rem)/3);}
  .tie .bottom{font: 0.24rem/0.34rem '微软雅黑';color: #AAAAAA;}
  .tie .bottom .otherNum1{float: right;}
  .tie .bottom img{display: inline-block;width: 0.34rem;height: 0.34rem;margin-right: 0.1rem;margin-bottom: 0.05rem;}

  .shopMessage{padding: 0.3rem;position: relative;background-color: #fff;}
  /* .shopMessage::before{content: '已完成';background-color: #CCCCCC;width: 0.88rem;height: 0.42rem;text-align: center;border-bottom-left-radius: 0.21rem;font: 0.2rem/0.42rem '微软雅黑';position: absolute;right: 0;top: 0;color: #fff;} */
  .shopMessageIng::before{content: '交易中';background-color: #4aace9;width: 0.88rem;height: 0.42rem;text-align: center;border-bottom-left-radius: 0.21rem;font: 0.2rem/0.42rem '微软雅黑';position: absolute;right: 0;top: 0;color: #fff;}
  .shopMessage .title{font: 0.42rem/0.6rem '微软雅黑';color: #333333;}
  .shopMessage .title p{display: inline-block;}
  .shopMessage .title .publicTags{margin-top: 0.15rem;}
  .shopMessage .time{font: 0.24rem/0.4rem '微软雅黑';color: #999;}
  .shopMessage .price p{font: 0.48rem/0.8rem '微软雅黑';color: #E63D40;display: inline-block;}
  .shopMessage .price .tags_1{border-radius: 0.18rem;background-color: #EDF0F2;text-align: center;color: #999999;font: 0.18rem/0.36rem '微软雅黑';height: 0.36rem;margin-top: 0.22rem;margin-left: 0.24rem;padding: 0 0.2rem;}
  .shopMessage .navs .navTxt{height:1.65rem;flex: 1;border: 2px solid #DDDDDD;box-sizing: border-box;}
  .shopMessage .navs .navTxt p{font: 0.28rem/0.34rem '微软雅黑';color: #333333;margin: 0.26rem;}
  .shopMessage .navs img{width:2.14rem;height:1.65rem;display: block;}
  .shopMessage .bot{font: 0.24rem/0.4rem '微软雅黑';color:#AAAAAA;margin-top: 0.34rem;}
  .shopMessage .bot img{width: 0.34rem;height: 0.34rem;display: inline-block;margin:0 0.1rem 0.05rem;}

  .centerNav{height:calc(100vh - 1.24rem - 50px);overflow-y: scroll;}
</style>
